
<!DOCTYPE html>
<html lang="zxx">

<head>
    <title>Home</title>
    <!-- Meta tag Keywords -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8" />
    <meta name="keywords" content="" />
    <script>
        addEventListener("load", function() {
            setTimeout(hideURLbar, 0);
        }, false);

        function hideURLbar() {
            window.scrollTo(0, 1);
        }

    </script>
    <!-- //Meta tag Keywords -->

    <!-- Custom-Files -->
    <link rel="stylesheet" href="css/bootstrap.css">
    <!-- Bootstrap-Core-CSS -->
    <link rel="stylesheet" href="css/style2.css" type="text/css" media="all" />
    <!-- Style-CSS -->
    <!-- font-awesome-icons -->
    <link href="css/font-awesome.css" rel="stylesheet">
    <!-- //font-awesome-icons -->
    <!-- /Fonts -->
    <link href="http://fonts.googleapis.com/css?family=Quicksand:300,400,500,700" rel="stylesheet">
    <link href="http://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900" rel="stylesheet">
    <!-- //Fonts -->

</head>

<body>
    <!-- mian-content -->
    <section class="main-content" id="home">

        <!-- header -->
        <header>
            <div class="container-fluid px-lg-5">
                <!-- nav -->
                <nav>
                    <div class="logo-w3ls" id="logo-w3ls">
                        <h1>
                            <a href="index.html"><span>T</span>oon</a>
                        </h1>

                    </div>

                    <label for="drop" class="toggle">Menu</label>
                    <input type="checkbox" id="drop" />
                    <ul class="menu">
                        <li class="mr-lg-4 mr-3 active"><a href="index.html">Home</a></li>
                        <li class="mr-lg-4 mr-3"><a href="about.html">About</a></li>
                        <li class="mr-lg-4 mr-3"><a href="blog.html">Blog</a>
                        </li>
                        <li class="mr-lg-4 mr-3">
                            <!-- First Tier Drop Down -->
                            <label for="drop-2" class="toggle">Dropdown <span class="fa fa-sort-desc" aria-hidden="true"></span> </label>
                            <a href="#">Gallery <span class="fa fa-sort-desc" aria-hidden="true"></span></a>
                            <input type="checkbox" id="drop-2" />
                            <ul>
                                <li><a href="gallery.html">Add link1</a></li>
                                <li><a href="gallery.html">Add link2</a></li>
                            </ul>
                        </li>
                        <li><a href="login.html">login</a></li>
                    </ul>
                </nav>
                <!-- //nav -->
            </div>
        </header>
        <!-- //header -->


        <!-- header -->
        <div class="csslider infinity" id="slider1">
            <input type="radio" name="slides" checked="checked" id="slides_1" />
            <input type="radio" name="slides" id="slides_2" />
            <input type="radio" name="slides" id="slides_3" />
            <input type="radio" name="slides" id="slides_4" />
            <ul>
                <li>
                    <div id="bg">
                        <div class="banner-text-wthree">
                            <div class="container">

                                <h3>Find Professional Design</h3>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div id="bg1">
                        <div class="banner-text-wthree">
                            <div class="container">
                                <h3>Looking for something new?</h3>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div id="bg2">
                        <div class="banner-text-wthree">
                            <div class="container">
                                <h3>Find Professional Design</h3>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div id="bg3">
                        <div class="banner-text-wthree">
                            <div class="container">
                                <h3>Looking for something new?</h3>
                            </div>
                        </div>
                    </div>
                </li>

            </ul>
            <div class="arrows">
                <label for="slides_1"></label>
                <label for="slides_2"></label>
                <label for="slides_3"></label>
                <label for="slides_4"></label>
            </div>
            <div class="navigation">
                <div>
                    <label for="slides_1"></label>
                    <label for="slides_2"></label>
                    <label for="slides_3"></label>
                    <label for="slides_4"></label>
                </div>
            </div>
        </div>

        <!-- //banner -->
    </section>
    <!--// banner-slider -->
    <!--/ab -->
    <section class="about py-lg-5 py-md-5 py-3">
        <div class="container">
            <div class="inner-sec-w3layouts py-lg-5 py-3">
                <div class="row">
                    <div class="col-lg-6 about-right px-lg-5 px-2 mt-lg-5 mt-2">

                        <h3 class="tittle"><span class="sub-tittle">About</span>Hi There!!!</h3>
                        <p class="my-4 text-justify">Lorem ipsum dolor sit amet Neque porro quisquam est qui dolorem Lorem int ipsum dolor sit amet when an unknown printer took a galley of type.Vivamus id tempor felis. Cras sagittis mi sit amet malesuada mollis. Mauris porroinit consectetur cursus tortor vel interdum.</p>

                        <a href="single.html" class="read my-3 btn"><span class="fa fa-long-arrow-alt-right"></span> Read More</a>
                        <h6 class="my-3">Follows On:</h6>
                        <ul class="social-icons text-center d-flex">
                            <li>
                                <a href="#">
                               Facebook
                            </a>
                            </li>
                            <li>
                                <a href="#">
                                Twitter
                            </a>
                            </li>
                            <li>
                                <a href="#">
                              Google +
                            </a>
                            </li>

                        </ul>

                    </div>
                    <div class="col-lg-6 about-img">
                        <img src="images/ab.png" class="img-fluid" alt="user-image">
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- //ab -->
    <!-- services  -->
    <section class="services-top bg-light py-5">
        <div class="container">
            <div class="inner-sec-w3layouts py-lg-5 py-3">
                <h3 class="tittle text-center"><span class="sub-tittle">Featured </span>Services</h3>
                <!-- services top row -->
                <div class="row pt-md-5">
                    <div class="col-md-6 services-gd-img">
                        <img src="images/ab4.jpg" class="img-fluid" alt="user-image">
                    </div>
                    <div class="col-md-6 services-gd-info">
                        <div class="my-3 services-gd">
                            <div class="card-body">
                                <span class="fa fa-bell-o" aria-hidden="true"></span>
                                <h5 class="card-title">Card title here</h5>
                                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            </div>
                        </div>
                        <div class="services-gd my-2">
                            <div class="card-body">
                                <span class="fa fa-binoculars" aria-hidden="true"></span>
                                <h5 class="card-title">Card title here</h5>
                                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            </div>
                        </div>
                        <div class="my-3 services-gd">
                            <div class="card-body">
                                <span class="fa fa-flask" aria-hidden="true"></span>
                                <h5 class="card-title">Card title here</h5>
                                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            </div>

                        </div>
                    </div>

                </div>

            </div>
        </div>
    </section>
    <!-- services -->

    <!--/counter-->
    <section class="stats py-lg-5 py-4" id="stats">
        <div class="container">
            <div class="container">
                <div class="row text-center">
                    <div class="col">
                        <div class="counter">
                            <h3 class="timer count-title count-number">100</h3>
                            <p class="count-text ">Our Customer</p>
                        </div>
                    </div>
                    <div class="col">
                        <div class="counter">
                            <h3 class="timer count-title count-number">1700</h3>
                            <p class="count-text ">Happy Clients</p>
                        </div>
                    </div>
                    <div class="col">
                        <div class="counter">
                            <h3 class="timer count-title count-number">11,900</h3>
                            <p class="count-text ">Project Complete</p>
                        </div>
                    </div>
                    <div class="col">
                        <div class="counter">
                            <h3 class="timer count-title count-number">157</h3>
                            <p class="count-text ">Coffee With Clients</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--//counter-->
    <!-- portfolio -->
    <section class="py-lg-5 portfolio-flyer py-5 bg-light">
        <div class="container py-lg-5">
            <h3 class="tittle text-center"><span class="sub-tittle">Recent works </span>Our Gallery</h3>

            <div class="row news-grids mt-lg-5 mt-4 text-center">
                <div class="col-md-4 gal-img">
                    <a href="#gal1"><img src="images/g1.jpg" alt="news image" class="img-fluid"></a>
                </div>
                <div class="col-md-4 gal-img">
                    <a href="#gal2"><img src="images/g2.jpg" alt="news image" class="img-fluid"></a>
                </div>
                <div class="col-md-4 gal-img">
                    <a href="#gal3"><img src="images/g3.jpg" alt="news image" class="img-fluid"></a>
                </div>
                <div class="col-md-4 gal-img">
                    <a href="#gal4"><img src="images/g4.jpg" alt="news image" class="img-fluid"></a>
                </div>
                <div class="col-md-4 gal-img">
                    <a href="#gal5"><img src="images/g5.jpg" alt="news image" class="img-fluid"></a>
                </div>
                <div class="col-md-4 gal-img">
                    <a href="#gal6"><img src="images/g6.jpg" alt="news image" class="img-fluid"></a>
                </div>
                <div class="col-md-4 gal-img">
                    <a href="#gal7"><img src="images/g7.jpg" alt="news image" class="img-fluid"></a>
                </div>
                <div class="col-md-4 gal-img">
                    <a href="#gal8"><img src="images/g8.jpg" alt="news image" class="img-fluid"></a>
                </div>
                <div class="col-md-4 gal-img">
                    <a href="#gal9"><img src="images/g9.jpg" alt="news image" class="img-fluid"></a>
                </div>
            </div>

        </div>
        <!-- popup-->
        <div id="gal1" class="pop-overlay animate">
            <div class="popup">
                <img src="images/g1.jpg" alt="Popup Image" class="img-fluid" />
                <p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p>
                <a class="close" href="#gallery">&times;</a>
            </div>
        </div>
        <!-- //popup -->

        <!-- popup-->
        <div id="gal2" class="pop-overlay animate">
            <div class="popup">
                <img src="images/g2.jpg" alt="Popup Image" class="img-fluid" />
                <p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p>
                <a class="close" href="#gallery">&times;</a>
            </div>
        </div>
        <!-- //popup -->
        <!-- popup-->
        <div id="gal3" class="pop-overlay animate">
            <div class="popup">
                <img src="images/g3.jpg" alt="Popup Image" class="img-fluid" />
                <p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p>
                <a class="close" href="#gallery">&times;</a>
            </div>
        </div>
        <!-- //popup3 -->
        <!-- popup-->
        <div id="gal4" class="pop-overlay animate">
            <div class="popup">
                <img src="images/g4.jpg" alt="Popup Image" class="img-fluid" />
                <p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p>
                <a class="close" href="#gallery">&times;</a>
            </div>
        </div>
        <!-- //popup -->
        <!-- popup-->
        <div id="gal5" class="pop-overlay animate">
            <div class="popup">
                <img src="images/g5.jpg" alt="Popup Image" class="img-fluid" />
                <p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p>
                <a class="close" href="#gallery">&times;</a>
            </div>
        </div>
        <!-- //popup -->
        <!-- popup-->
        <div id="gal6" class="pop-overlay animate">
            <div class="popup">
                <img src="images/g6.jpg" alt="Popup Image" class="img-fluid" />
                <p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p>
                <a class="close" href="#gallery">&times;</a>
            </div>
        </div>
        <!-- //popup -->
        <!-- popup-->
        <div id="gal7" class="pop-overlay animate">
            <div class="popup">
                <img src="images/g7.jpg" alt="Popup Image" class="img-fluid" />
                <p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p>
                <a class="close" href="#">&times;</a>
            </div>
        </div>
        <!-- //popup -->
        <!-- popup-->
        <div id="gal8" class="pop-overlay animate">
            <div class="popup">
                <img src="images/g8.jpg" alt="Popup Image" class="img-fluid" />
                <p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p>
                <a class="close" href="#gallery">&times;</a>
            </div>
        </div>
        <!-- //popup -->
        <!-- popup-->
        <div id="gal9" class="pop-overlay animate">
            <div class="popup">
                <img src="images/g9.jpg" alt="Popup Image" class="img-fluid" />
                <p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p>
                <a class="close" href="#gallery">&times;</a>
            </div>
        </div>
        <!-- //popup -->

    </section>


    <!-- //portfolio -->

    <!--/ab -->
    <section class="about py-lg-5 py-md-5 py-3">
        <div class="container">
            <div class="inner-sec-w3layouts py-lg-5 py-3">
                <h3 class="tittle text-center"><span class="sub-tittle">Featured </span>Recent works</h3>
                <div class="card-deck mt-5">
                    <div class="card">
                        <img class="card-img-top" src="images/b1.jpg" alt="Card image cap">
                        <div class="card-body p-lg-5">
                            <h5 class="card-title">Card title</h5>
                            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                        <div class="card-footer">
                            <small class="text-muted">Last updated 3 mins ago</small>
                        </div>
                    </div>
                    <div class="card">
                        <img class="card-img-top" src="images/b2.jpg" alt="Card image cap">
                        <div class="card-body p-lg-5">
                            <h5 class="card-title">Card title</h5>
                            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                        <div class="card-footer">
                            <small class="text-muted">Last updated 3 mins ago</small>
                        </div>
                    </div>
                    <div class="card">
                        <img class="card-img-top" src="images/b3.jpg" alt="Card image cap">
                        <div class="card-body p-lg-5">
                            <h5 class="card-title">Card title</h5>
                            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                        <div class="card-footer">
                            <small class="text-muted">Last updated 3 mins ago</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- newsletter -->
    <section class="newsletters text-center">
        <div class="layer p-lg-5 py-3">
            <div class="container p-md-5 py-3">
                <h3 class="tittle text-white"><span class="sub-tittle">Featured </span>Want To Start A Project With Us?</h3>
                <p class="mt-4 text-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Maecenas interdum, metus vitae tincidunt porttitor, magna quam egestas sem, ac scelerisque nisl nibh vel lacus. Proin eget gravida odio.</p>
                <a href="single.html" class="btn read two mt-3"><span class="fa fa-long-arrow-alt-right"></span> Read More</a>
            </div>
        </div>
    </section>
    <!-- //newsletter -->

    <!--/sponsors-->
    <section class="sponsers py-lg-5 py-md-5 py-3" id="sponsors">
        <div class="container">
            <div class="inner-sec-w3layouts py-lg-5 py-3">
                <h3 class="tittle text-center"><span class="sub-tittle">Featured </span>Sponsors</h3>
                <div class="sponsers-icon text-center mt-lg-5 mt-4">
                    <ul class="list-unstyled py-md-5 partners-icon row">
                        <li class="col-md-2">
                            <i class="fa fa-apple" aria-hidden="true"></i>
                        </li>
                        <li class="col-md-2">
                            <i class="fa fa-bitbucket" aria-hidden="true"></i>
                        </li>
                        <li class="col-md-2">
                            <i class="fa fa-meetup" aria-hidden="true"></i>
                        </li>
                        <li class="col-md-2">
                            <i class="fa fa-slideshare" aria-hidden="true"></i>
                        </li>
                        <li class="col-md-2">
                            <i class="fa fa-renren" aria-hidden="true"></i>
                        </li>
                        <li class="col-md-2">
                            <i class="fa fa-tripadvisor" aria-hidden="true"></i>
                        </li>

                    </ul>
                </div>
            </div>
        </div>
    </section>
    <!-- //sponsors -->
    <!--/footer-->
    <footer class="footer">
        <div class="container-fluid p-lg-5 p-md-3">

            <div class="row py-sm-4 py-3">
                <div class="col-lg-4 footer-end-grid">
                    <h2>
                        <a href="index.html"><span>T</span>oon</a>
                    </h2>
                    <p class="my-4 text-justify">Maecenas interdum, metus vitae tincidunt porttitor, magna quam egestas sem, ac scelerisque nisl nibh vel lacus. Proin eget gravida odio.</p>
                    <h3>Follow Us</h3>
                    <ul class="social-icons text-center d-flex">
                        <li>
                            <a href="#">
                               Facebook
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                Twitter
                            </a>
                        </li>
                        <li>
                            <a href="#">
                              Google +
                            </a>
                        </li>
                        <li>
                            <a href="#">
                               Dribble
                            </a>
                        </li>
                    </ul>
                </div>

                <div class="col-lg-2 col-md-4">
                    <h3>Useful Link</h3>
                    <ul class="list-footer-w3layouts">
                        <li>
                            <a href="index.html" class="nav-link">
                                Home
                            </a>
                        </li>
                        <li class="my-2">
                            <a href="about.html" class="nav-link">
                               About
                            </a>
                        </li>
                        <li class="my-2">
                            <a href="blog.html" class="nav-link">
                               Blog Posts
                            </a>
                        </li>
                        <li class="mb-2">
                            <a href="gallery.html" class="nav-link">
                              Gallery
                            </a>
                        </li>

                    </ul>
                </div>
                <div class="col-lg-2  mt-sm-5">
                    <ul class="list-footer-w3layouts">
                        <li>
                            <a href="#login" class="nav-link">
                              Login
                            </a>
                        </li>
                        <li class="my-2">
                            <a href="#register" class="nav-link">
                               Register
                            </a>
                        </li>
                        <li class="my-2">
                            <a href="#" class="nav-link">
                                License
                            </a>
                        </li>
                        <li>
                            <a href="contact.html" class="nav-link">
                                Contact Us
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="subscribe col-lg-4">
                    <h3>Subscribe Now</h3>
                    <p class="my-4 text-justify">Lorem ipsum dolor sit amet consectetur adipisicing elit sedc dnmo eiusmod tempor incididunt ut labore.</p>
                    <form action="#" method="post" class="newsletter">
                        <input class="email" type="email" placeholder="Your email..." required="">
                        <input class="form-control" type="submit" value="Subscribe">
                    </form>
                </div>
            </div>
            <hr>
            <div class="d-flex justify-content-between pt-lg-3  footer-bottom-cpy">

                <div class="social-content pb-md-0 pb-4">
                    <ul class="social-icons text-center d-flex">
                        <li class="ml-lg-5">
                            <a href="#" class="reg-in">
                                Privacy and Policy
                            </a>
                        </li>
                        <li>
                            <a href="#register" class="nav-link reg-in two">
                               Register
                            </a>
                        </li>

                    </ul>


                </div>
            </div>
            <div class="text-right mt-3">
                <a href="#home" class="move-top scroll"><span class="fa fa-angle-up" aria-hidden="true"></span></a>
            </div>
        </div>
    </footer>
    <!-- popup-login-->
    <div id="login" class="pop-overlay animate">
        <div class="popup">
            <div class="login px-4 mx-auto mw-100">
                <h5 class="text-left mb-4">Login Now</h5>
                <form action="#" method="post">
                    <div class="form-group">
                        <label class="mb-2">Email address</label>
                        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="" required="">
                        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                    </div>
                    <div class="form-group">
                        <label class="mb-2">Password</label>
                        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="" required="">
                    </div>
                    <div class="form-check mb-2">
                        <input type="checkbox" class="form-check-input" id="exampleCheck1">
                        <label class="form-check-label" for="exampleCheck1">Check me out</label>
                    </div>
                    <button type="submit" class="btn btn-primary submit mb-4">Sign In</button>
                    <p class="text-left pb-4">
                        <a href="#" data-toggle="modal" data-target="#exampleModalCenter2"> Don't have an account?</a>
                    </p>
                </form>
            </div>


            <a class="close" href="#gallery">&times;</a>
        </div>
    </div>
    <!--// popup-login-->
    <!-- popup-login-->
    <div id="register" class="pop-overlay animate">
        <div class="popup">
            <div class="login px-4 mx-auto mw-100">
                <h5 class="text-left mb-4">Register Now</h5>
                <form action="#" method="post">
                    <div class="form-group">
                        <label>First name</label>

                        <input type="text" class="form-control" id="validationDefault01" placeholder="" required="">
                    </div>
                    <div class="form-group">
                        <label>Last name</label>
                        <input type="text" class="form-control" id="validationDefault02" placeholder="" required="">
                    </div>

                    <div class="form-group">
                        <label class="mb-2">Password</label>
                        <input type="password" class="form-control" id="password1" placeholder="" required="">
                    </div>
                    <div class="form-group">
                        <label>Confirm Password</label>
                        <input type="password" class="form-control" id="password2" placeholder="" required="">
                    </div>

                    <button type="submit" class="btn btn-primary submit mb-4">Register</button>
                    <p class="text-left pb-4">
                        <a href="#">By clicking Register, I agree to your terms</a>
                    </p>
                </form>

            </div>

            <a class="close" href="#gallery">&times;</a>
        </div>
    </div>
    <!--// popup-login-->
    <!--//footer-->

</body>

</html>
